<script setup lang="ts">
import {onMounted, ref} from "vue";

import Carousel from "./Carousel.vue";
import Search from "./Search.vue";
import Level from './Level.vue'
import Region from "@/pages/home/Region.vue";
import Card from './Card.vue'
import Tip from '@/pages/home/Tip.vue'

import {reqHosp} from '@/api/home.ts'

import type {Content, HospitalResponseData} from '@/api/type_home.ts'


let currentPage = ref(1)  // 第几页
let pageSize = ref(5)  // 几条数据
let background = ref(true)
//存储已有的医院的数据
let hasHospitalArr = ref<Content>([]);
//存储医院总个数
let total = ref<number>(0);
//存储医院的等级相应数据
let hostype = ref<string>("");
//存储医院的地区
let districtCode = ref<string>("");

onMounted(() => {
    getHospitalInfo()
})


const getHospitalInfo = async () => {
    // let result:any = await reqHosp(currentPage.value, pageSize.value)
    //获取医院的数据:默认获取第一页、一页十个医院的数据
    let result: HospitalResponseData = await reqHosp(
        currentPage.value,
        pageSize.value,
        hostype.value,
        districtCode.value
    );
    if (result.code == 200) {
        //存储已有的医院的数据
        hasHospitalArr.value = result.data.content;
        //存储医院的总个数
        total.value = result.data.totalElements;
    }
}
//分页器页码发生变化时候回调
const currentChange = () => {
    getHospitalInfo();
};
//分页器下拉菜单发生变化的时候会触发
const sizeChange = () => {
    //当前页码归第一页
    currentPage.value = 1;
    //再次发请求获取医院的数据
    getHospitalInfo();
};
//子组件自定义事件:获取儿子给父组件传递过来的等级参数
const getLevel = (level: string) => {
    //收集参数:等级参数
    hostype.value = level;
    //再次发请求
    getHospitalInfo();
};
//子组件自定义事件：获取子组件传递过来的地区参数
const getRegion = (region: string) => {
    //存储地区的参数
    districtCode.value = region;
    getHospitalInfo();
};
</script>

<template>
    <Carousel></Carousel>
    <Search></Search>

    <el-row gutter="20">
        <el-col :span="20">
            <Level @getLevel="getLevel"></Level>
            <Region @getRegion="getRegion"></Region>
            <div class="hosp" v-if="hasHospitalArr.length > 0">
                <Card
                    class="item"
                    v-for="(item, index) in hasHospitalArr"
                    :key="index"
                    :hospitalInfo="item"
                />
            </div>
            <el-empty v-else description="暂无数据"/>
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 40]"
                :background="background"
                layout="prev, pager, next, jumper, ->, sizes, total"
                :total="total"
                @current-change="currentChange"
                @size-change="sizeChange"
            />
        </el-col>

        <el-col :span="4">
            <Tip></Tip>
        </el-col>
    </el-row>

</template>

<style scoped lang="scss">
.hosp {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item {
        width: 48%;
        margin: 10px 0;
    }
}
</style>